<template>
  <el-dialog :title="'时钟配置参数'" :visible.sync="dialogVisible" width="1100px">
    <el-table
      :data="tableData"
      height="400"
      style="width: 100%"
      @cell-mouse-enter="handleMouse"
      @cell-mouse-leave="handleMouse"
    >
      <el-table-column type="index" width="60" align="center">
        <template slot="header" slot-scope="scope">
          <el-button
            v-if="dialogType !== 'view'"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            circle
            @click="handleClick('add', scope.row)"
          ></el-button>
          <span v-else>序号</span>
        </template>
        <template slot-scope="slotProps">
          <el-button
            v-show="slotProps.row.showDelBtn"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            circle
            @click="handleClick('del', slotProps.$index)"
          ></el-button>
          <span v-show="!slotProps.row.showDelBtn">
            {{ slotProps.$index + 1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="参数名称" width="150" show-overflow-tooltip>
        <template slot="header">
          <i v-if="dialogType === 'edit'" class="fontColorRed">*</i>
          参数名称
        </template>
        <template slot-scope="{ row }">
          <span v-if="dialogType === 'view'">{{ row.parameterName }}</span>
          <el-input v-else v-model="row.parameterName" class="show-word-limit" :maxlength="50" show-word-limit />
        </template>
      </el-table-column>
      <el-table-column label="参数key" width="150" show-overflow-tooltip>
        <template slot="header">
          <i v-if="dialogType === 'edit'" class="fontColorRed">*</i>
          参数key
        </template>
        <template slot-scope="{ row }">
          <span v-if="dialogType === 'view'">{{ row.symbol }}</span>
          <el-input v-else v-model="row.symbol" class="show-word-limit" :maxlength="50" show-word-limit />
        </template>
      </el-table-column>
      <el-table-column label="参数依赖" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span v-if="dialogType === 'view'">{{ row.dependencies }}</span>
          <el-input
            v-else
            v-model="row.dependencies"
            class="show-word-limit-52"
            :maxlength="100"
            show-word-limit
            @input="handleInput(row, $event)"
          />
        </template>
      </el-table-column>
      <el-table-column label=" 数据类型" width="115" show-overflow-tooltip>
        <template slot="header">
          <i v-if="dialogType === 'edit'" class="fontColorRed">*</i>
          数据类型
        </template>
        <template slot-scope="{ row }">
          <span v-if="dialogType === 'view'">{{ row.dataType }}</span>
          <el-select v-else v-model="row.dataType">
            <el-option label="enum" value="enum"></el-option>
            <el-option label="integer" value="integer"></el-option>
            <el-option label="float" value="float"></el-option>
            <el-option label="boolean" value="boolean"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="有效值" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span v-if="dialogType === 'view'">{{ row.validValues }}</span>
          <el-input v-else v-model="row.validValues" class="show-word-limit-52" :maxlength="200" show-word-limit />
        </template>
      </el-table-column>
      <el-table-column label="默认值" width="150" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span v-if="dialogType === 'view'">{{ row.defaultValue }}</span>
          <el-input v-else v-model="row.defaultValue" class="show-word-limit" :maxlength="50" show-word-limit />
        </template>
      </el-table-column>
    </el-table>
    <div v-show="dialogType === 'edit'" slot="footer" style="display: block; text-align: center">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClockConfigurationParameters',

  data() {
    return {
      dialogType: '',
      dialogVisible: false,
      tableData: []
    }
  },

  mounted() {},

  methods: {
    is(type, data) {
      this.dialogVisible = true
      this.dialogType = type
      let tableData = JSON.parse(JSON.stringify(data))
      this.tableData = tableData.map((item) => {
        this.$set(item, 'showDelBtn', false)
        return item
      })
    },
    handleInput(row, value) {
      row.dependencies = value.replace(/[^a-zA-Z0-9_=!><\s\|&()]/g, '') // 限制输入只能包含字母和数字
    },
    handleClick(name, index = 0) {
      if (name === 'add') {
        this.tableData.push({
          showDelBtn: false
        })
      } else {
        this.tableData.splice(index, 1)
      }
    },
    handleMouse(row) {
      if (this.dialogType === 'view') {
        return
      }
      row.showDelBtn = !row.showDelBtn
    },
    handleSubmit() {
      let result = true
      this.tableData.every((item, index) => {
        if (!item.parameterName) {
          this.$message.warning('第' + (index + 1) + '行参数名称不能为空')
          result = false
          return false
        }
        if (!item.symbol) {
          this.$message.warning('第' + (index + 1) + '行参数key不能为空')
          result = false
          return false
        }
        if (!item.dataType) {
          this.$message.warning('第' + (index + 1) + '行 数据类型不能为空')
          result = false
          return false
        }
        return true
      })
      if (!result) return
      this.$emit('submit', 'updateClockParameters', this.tableData)
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.fontColorRed {
  color: red;
}
</style>
